import { useState } from 'react'
import './index.scss'
import icon from "/src/assets/react.svg"
import { useNavigate, Outlet } from 'react-router-dom'
import { AppstoreOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

//菜单栏目
const items: MenuProps['items'] = [
  getItem('', 'show', <MenuUnfoldOutlined />),

  getItem('概览', 'overview', <AppstoreOutlined />),
  getItem('统计', 'statistics', <AppstoreOutlined />),
  { type: 'divider' },
  
  getItem('内容', 'content', null, [
    getItem('内容管理', 'wall', <AppstoreOutlined />),
    getItem('评论管理', 'comment', <AppstoreOutlined />),
    getItem('时讯管理', 'info', <AppstoreOutlined />),
    getItem('反馈列表', 'feedback', <AppstoreOutlined />),
  ], 'group'),
  { type: 'divider' },

  getItem('广告', 'ad', null, [
    getItem('广告管理', 'ad_list', <AppstoreOutlined />),
    getItem('广播管理', 'broadcast_list', <AppstoreOutlined />),
  ], 'group'),
  { type: 'divider' },

  getItem('用户', 'user', null, [
    getItem('用户管理', 'user_list', <AppstoreOutlined />),
  ], 'group'),
  { type: 'divider' },

  getItem('学校', 'school', null, [
    getItem('学校管理', 'school_list', <AppstoreOutlined />),
  ], 'group'),
  { type: 'divider' },

  getItem('日志', 'logs', null, [
    getItem('日志表单', 'logs_list', <AppstoreOutlined />),
  ], 'group'),
  { type: 'divider' },

];

const DivFunc: React.FC = () => {
  //路由跳转
  const navigate = useNavigate();
  //数据
  let [data, setState] = useState(
    {
      showMenu: false,
    }
  )
  //跳转路由
  const onClick: MenuProps['onClick'] = (res) => {
    console.log('click ', res);

    if (res.key == 'show') {
      data.showMenu = data.showMenu ? false : true;
      setState(State => ({ ...State, showMenu: data.showMenu }));
    } else if (res.key == 'overview') {
      navigate('/home');
    } else if (res.key == 'statistics') {
      navigate('/home/statistics');
    } else if (res.key == 'wall') {
      navigate('/home/wall');
    } else if (res.key == 'comment') {
      navigate('/home/comment');
    } else if (res.key == 'info') {
      navigate('/home/info');
    } else if (res.key == 'feedback') {
      navigate('/home/feedback');
    } else if (res.key == 'ad') {
      navigate('/home/ad');
    }else if (res.key == 'ad_list') {
      navigate('/home/admercial');
    }
  };

  return (
    <div className='home_body '>
      <div className='menu'>
        <Menu
          onClick={onClick}
          inlineCollapsed={data.showMenu}
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          items={items}
        />
      </div>
      <div className='content'>
        <div className='content_top align'>
          <div className='title'>XXX·后台管理系统Demo</div>
          <div className='user '>
            <div className='user_box align active'>
              <img className='user_icon' src={icon}></img>
              <span className='user_title'>is User name</span>
            </div>
          </div>
        </div>
        <div className='content_box'>
          <Outlet />
        </div>
      </div>
    </div>
  );
};

export default DivFunc
